<template>
  <BasicTable @register="registerTable">
    <template #toolbar>
      <a-button type="primary" @click="handleNewName">详情测试弹窗</a-button>
      <a-button type="primary" @click="handleAddTask">新建</a-button>
      <a-button preIcon="material-symbols:delete-outline" color="error" style="margin-left: 10px">
        删除
      </a-button>
    </template>
    <!-- 任务名称 -->
    <template #newName="{ text: newName, record }">
      <span>
        <a>
          <Icon
            icon="ion:document-outline"
            :style="{
              color: record.havefile == '0' ? 'gray' : '#3170a7',
              visibility: record.havefile != '0' || record.approve == true ? '' : 'hidden',
            }"
          />
          {{ newName }}
        </a>
      </span>
    </template>
    <!-- 计划开始时间 -->
    <template #strPlanStartTime="{ text: strPlanStartTime }">
      <span>
        {{ proxy.$filters.filterTime(strPlanStartTime) }}
      </span>
    </template>
    <!-- 计划结束时间 -->
    <template #strPlanEndTime="{ text: strPlanEndTime }">
      <span>
        {{ proxy.$filters.filterTime(strPlanEndTime) }}
      </span>
    </template>
    <!-- 实际开始时间 -->
    <template #strReallyStartTime="{ text: strReallyStartTime }">
      <span>
        {{ proxy.$filters.filterTime(strReallyStartTime) }}
      </span>
    </template>
    <!-- 实际结束时间 -->
    <template #strReallyEndTime="{ text: strReallyEndTime }">
      <span>
        {{ proxy.$filters.filterTime(strReallyEndTime) }}
      </span>
    </template>
    <!-- 任务状态 -->
    <template #newState="{ text: newState }">
      <span>
        <Tag
          :color="
            newState === '0'
              ? '#909399'
              : newState === '1'
              ? '#108ee9'
              : newState === '2'
              ? '#87d068'
              : newState === '3'
              ? '#c9c925'
              : newState === '4'
              ? '#f50'
              : '#fa8c16'
          "
          >{{ proxy.$filters.filterTaskStatus(newState) }}</Tag
        >
      </span>
    </template>
    <!-- 里程碑 -->
    <template #milestone="{ text: milestone }">
      <span>
        <Switch :checked="milestone" />
      </span>
    </template>
    <!-- 交付件 -->
    <template #approve="{ text: approve }">
      <span>
        <Switch :checked="approve" />
      </span>
    </template>
  </BasicTable>
  <!-- 新增任务弹窗 -->
  <Modal @register="register1" />
  <!-- 任务详情弹窗 -->
  <ModalTaskDetail @register="register2" />
</template>
<script lang="ts" setup>
  import { BasicTable, useTable } from '/@/components/Table';
  import { getTaskManagerColumns, getTaskManagerConfig } from './tableData';
  import { taskManagerApi } from '/@/api/demo/project';
  import { getCurrentInstance } from 'vue';
  import { Tag, Switch } from 'ant-design-vue';
  import { Icon } from '/@/components/Icon';
  import Modal from './addTask.vue';
  import { useModal } from '/@/components/Modal';
  import ModalTaskDetail from './taskDetail.vue';

  const [register1, { openModal: openModal1 }] = useModal();
  const [register2, { openModal: openModal2 }] = useModal();

  const props = defineProps({
    projectId: String,
  });
  const { proxy }: any = getCurrentInstance();
  const [registerTable] = useTable({
    api: taskManagerApi,
    beforeFetch: (params) => {
      params.Projectid = props.projectId;
    },
    fetchSetting: {
      // 当前页传递给后台的字段名称
      pageField: 'CurrentPage',
      // 后台每页显示的数量字段名称
      sizeField: 'PageSizes',
      // 接口返回的表单数据字段名称
      listField: 'listtaskinfo',
    },
    // 分页配置
    pagination: { pageSize: 10, pageSizeOptions: ['10', '20', '30', '40'], defaultPageSize: 10 },
    showIndexColumn: false,
    isTreeTable: true,
    columns: getTaskManagerColumns(),
    useSearchForm: true,
    formConfig: getTaskManagerConfig(), // 表单配置
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    bordered: true,
    rowKey: 'id',
    childrenColumnName: 'taskDtos',
    rowSelection: { type: 'checkbox' },
    clickToRowSelect: false,
  });
  // 新建任务
  const handleAddTask = () => {
    openModal1(true);
  };
  // 任务详情
  const handleNewName = () => {
    openModal2(true);
  };
</script>
